<template>
	<view class="custom-tabbar">
		<!-- Tab 内容区域 -->
		<component :is="currentComponent" />

		<!-- 自定义 TabBar -->
		<view class="tabbar">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="tabbar-item" :class="{ active: currentTab === item.name }" @click="switchTab(item)">
					<image :src="currentTab === item.name ? item.selectedIcon : item.icon" mode="aspectFit"></image>
					<text>{{ item.text }}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import Message from '@/pages/tabbar/message/message.vue';
	import Mine from '@/pages/tabbar/mine/mine.vue';
	import MyApproval from '@/pages/tabbar/myapproval/myapproval.vue';
	import HistoryApproval from '@/pages/tabbar/historyapproval/historyapproval.vue';
	import Ticket from '@/pages/tabbar/ticket/ticket.vue';
	import Report from '@/pages/tabbar/report/report.vue';
	import Templatee from '@/pages/tabbar/template/template.vue';
	import Warning from '@/pages/tabbar/warning/warning.vue';
	export default {
		components: {
			Message,
			Mine,
			MyApproval,
			HistoryApproval,
			Ticket,
			Report,
			Templatee,
			Warning
		},
		data() {
			return {
				role: '', // 当前用户角色
				currentTab: 'message', // 默认选中的 tab
				tabList: [], // 动态 tab 列表
				componentsMap: {
					message: 'Message',
					mine: 'Mine',
					myapproval: 'MyApproval',
					historyapproval: 'HistoryApproval',
					ticket: 'Ticket',
					report: 'Report',
					templatee: 'Templatee',
					warning: 'Warning'
				}
			};
		},
		onLoad() {
			this.role = uni.getStorageSync('userRole') || 'EMPLOYEE'; // 假设你已存储了用户角色
			this.initTabBar();
		},
		methods: {
			initTabBar() {
				if (this.role === 'EMPLOYEE') {
					this.tabList = [{
							name: 'message',
							text: '申请工单',
							icon: '/static/tabar1.png',
							selectedIcon: '/static/tabaron.png'
						},
						{
							name: 'ticket',
							text: '操作工单',
							icon: '/static/tabar2.png',
							selectedIcon: '/static/tabaron22.png'
						},
						{
							name: 'mine',
							text: '我的',
							icon: '/static/tabar4.png',
							selectedIcon: '/static/tabaron44.png'
						}
					];
				} else if (this.role === 'MANAGER') {
					this.tabList = [{
							name: 'message',
							text: '申请工单',
							icon: '/static/tabar1.png',
							selectedIcon: '/static/tabaron.png'
						},
						{
							name: 'myapproval',
							text: '我的审批',
							icon: '/static/tabar2.png',
							selectedIcon: '/static/tabaron22.png'
						},
						{
							name: 'historyapproval',
							text: '审批历史',
							icon: '/static/tabar4.png',
							selectedIcon: '/static/tabaron22.png'
						},
						{
							name: 'mine',
							text: '我的',
							icon: '/static/tabar4.png',
							selectedIcon: '/static/tabaron44.png'
						}
					];
				} else if (this.role === 'ADMIN') {
					this.tabList = [{
							name: 'templatee',
							text: '模板管理',
							icon: '/static/tabar1.png',
							selectedIcon: '/static/tabaron.png'
						},
						{
							name: 'report',
							text: '报告管理',
							icon: '/static/tabar2.png',
							selectedIcon: '/static/tabaron22.png'
						},
						{
							name: 'mine',
							text: '我的',
							icon: '/static/tabar4.png',
							selectedIcon: '/static/tabaron44.png'
						}
					];
				}
				this.currentTab = this.tabList[0].name;
			},
			switchTab(item) {
				this.currentTab = item.name;
			}
		},
		computed: {
			currentComponent() {
				return this.componentsMap[this.currentTab];
			}
		}
	};
</script>

<style scoped>
	.custom-tabbar {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
		border-top: 1px solid #eee;
		height: 100rpx;
		z-index: 999;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
	}

	.tabbar-item.active {
		color: #3a7afe;
	}

	.tabbar-item image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 5rpx;
	}
</style>